@extends('admin::layouts.master')
@section('content')
    @component('components.tabs',['title'=>'角色管理'])
        @slot('nav')
            {{--<li class="nav-item"><a href="{{route('role.index')}}" class="nav-link active">角色列表</a></li>--}}
            {{--<li class="nav-item"><a href="#profile" class="nav-link" data-toggle="modal" data-target="#addRole">添加角色</a>--}}
            {{--</li>--}}
            <div class="mt-2">
                <a href="{{route('role.index')}}" class="btn btn-space btn-primary">角色列表</a>
                <button data-toggle="modal" data-target="#addRole" type="button" class="btn btn-space btn-primary">添加角色</button>
            </div>

            {{--模态框--}}
            {{--引入模态框组件开始--}}
            @component('components.modal',['title'=> '添加角色','url'=>'/admin/role','id'=>'addRole','style'=>'block'])
                <div class="modal-body">
                    <div class="form-group">
                        <label>中文标识</label>
                        <input type="text" name="title" placeholder="输入中文的标识" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>英文标识</label>
                        <input type="text" name="name" placeholder="输入英文的标识" class="form-control">
                    </div>
                </div>
            @endcomponent
            {{--引入模态框组件结束--}}

        @endslot
        @slot('body')
            <table class="table">
                <thead>
                <tr>
                    <th style="width:20%;">编号</th>
                    <th style="width:10%;">中文标识</th>
                    <th class="number">英文标识</th>
                    <th class="number">创建时间</th>
                    <th class="actions">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($rolesdate as $v)
                    <tr>
                        <td>{{$v['id']}}</td>
                        <td>{{$v['title']}}</td>
                        <td class="number">{{$v['name']}}</td>
                        <td class="number">{{$v['created_at']}}</td>
                        <td class="actions">
                            <div class="btn-group btn-space">
                                <button type="button" style="height: 30px" data-toggle="modal" class="btn btn-info" data-target="#showRole{{$v['id']}}">查看</button>
                                {{--引入模态框组件开始,此处引入模态框组件，只为了查看功能--}}
                                @component('components.modal',['title'=> '展示角色信息','url'=>route('role.update',$v['id']),'id'=>'showRole'.$v['id'],'style'=>'none'])
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label>中文标识</label>
                                            <input type="text" name="title" class="form-control" readonly value="{{$v['title']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>英文标识</label>
                                            <input type="text" name="name" class="form-control" readonly value="{{$v['name']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>创建时间</label>
                                            <input type="text" name="name" class="form-control" readonly value="{{$v['created_at']}}">
                                        </div>
                                    </div>
                                @endcomponent
                                {{--引入模态框组件结束--}}


                                <button data-toggle="modal" data-target="#editRole{{$v['id']}}" type="button" class="btn  btn-success">
                                    编辑
                                </button>
                                {{--引入模态框组件开始,此处引入模态框组件，只为了编辑功能--}}
                                @component('components.modal',['title'=> '编辑角色','url'=>route('role.update',$v['id']),'id'=>'editRole'.$v['id'],'method'=> 'PUT','style'=>'block'])
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label>中文标识</label>
                                            <input type="text" name="title" class="form-control" value="{{$v['title']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>英文标识</label>
                                            <input type="text" name="name" class="form-control" value="{{$v['name']}}">
                                        </div>
                                    </div>
                                @endcomponent
                                {{--引入模态框组件结束--}}


                                <form action="{{route('role.destroy',$v['id'])}}" method="post">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">删除</button>
                                </form>
                                <a href="{{route('permission',$v)}}" class="btn btn-warning">权限</a>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @endslot

    @endcomponent
    @endsection